<template>
  <div>
    <zm-form :model="form" ref="form" label-width="150px">
      <zm-form-item
        label-width="120px"
        label="特殊限制规则"
        prop="type"
        :rules="RULES"
      >
        <zm-data-select
          v-model="form.type"
          :list="limitRules"
          :disabled-value="DisabledLimitValue"
          class="w200"
          clearable
          placeholder="请选择规则"
          str
        >
        </zm-data-select>
        <!-- 指定时间组件 -->
        <holiday-time
          ref="holidayTime"
          v-if="isShowHolidayTime"
          v-model="form"
          class="mt15"
        ></holiday-time>
        <!-- 排期展示 -->
        <template v-if="isShowPaiQi">
          <plan-key-item
            class="mt15"
            v-model="form.planKey"
            :type="form.type"
          ></plan-key-item>
        </template>
      </zm-form-item>
      <!-- 类型为 指定时间段不可用、指定时间段指定影片补差 -->
      <template v-if="isShowHolidayTime">
        <!-- 选择影院组件 -->
        <cinema-radio label-width="120px" v-model="form" @input="handleFinalAfter"></cinema-radio>

        <!-- 选择制式 -->
        <zm-form-item
          label-width="120px"
          v-if="form.copyTypeList && form.copyTypeList.length > 0"
          label="选择制式"
          prop="copyType"
          :rules="RULES"
        >
          <zm-checkbox
            name-key="value"
            v-model="form.copyType"
            :list="form.copyTypeList"
            :option="{ isAllShow: true }"
          />
        </zm-form-item>
        <!-- 选择影厅 -->
        <zm-form-item
          label-width="120px"
          v-if="form.hallTypeList && form.hallTypeList.length > 0"
          label="选择影厅"
          prop="hallType"
          :rules="RULES"
        >
          <zm-checkbox
            name-key="value"
            v-model="form.hallType"
            :list="form.hallTypeList"
            :option="{ isAllShow: true }"
          />
        </zm-form-item>
        <!-- 类型为指定时间段指定影片补差展示 -->
        <div v-if="form.type === '3'">
          <!-- 选择影片 -->
          <zm-form-item
            label-width="120px"
            label="选择影片"
            prop="filmType"
            :rules="RULES"
          >
            <el-radio-group
              v-model="form.filmType"
              @change="(val) => handleClearFilmCode(val)"
            >
              <el-radio label="1">全部影片</el-radio>
              <el-radio label="2">指定影片</el-radio>
            </el-radio-group>
            <!-- 指定影片 -->
            <film-selector
              v-if="form.filmType === '2'"
              v-model="form.filmCode"
              class="dib"
            ></film-selector>
          </zm-form-item>
          <!-- 补差金额 start -->
          <zm-form-item label="补差金额" label-width="120px">
            <set-price-table-items
              :keys="setPriceKeys"
              :more="true"
              :data="form"
              :all-x-axis="form.hallTypeList"
              :all-y-axis="form.copyTypeList"
              :x-axis="form.hallType"
              :y-axis="form.copyType"
              v-if="isShowSetPriceTable"
            ></set-price-table-items>
            <zm-button icon="el-icon-plus" @click="handleSetAll">
              批量设置
            </zm-button>
          </zm-form-item>
        </div>
      </template>
    </zm-form>

    <!-- 批量设置固定补差价格 -->
    <set-all
      v-model="isShowSetAll"
      v-if="isShowSetAll"
      @handle-after="setAllCallBack"
    ></set-all>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import HolidayTime from '@/components/HolidayTime'
import CinemaRadio from '@/views/product/components/CinemaRadio'
import FilmSelector from '@/views/product/components/FilmSelector'
import SetAll from '@/views/product/components/SetAll'
import SetPriceTableItems from '@/components/SetPriceTableItems'
import cloudApis from '@/api/src/cloud'
import PlanKeyItem from '../PlanKeyItem'
export default {
  name: 'OnlineRuleItem',
  components: {
    HolidayTime,
    CinemaRadio,
    FilmSelector,
    SetAll,
    SetPriceTableItems,
    PlanKeyItem
  },
  mixins: [tableMixin],
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    // 是否禁用线上规则的指定时间段补差,类型为优惠券时特殊处理
    isDisabledLimitRule: Boolean
  },
  data () {
    return {
      RULES: {
        required: true,
        message: '*为必填项，不能为空',
        trigger: 'change'
      },

      limitRules: [
        {
          name: '不限制',
          value: '1'
        },
        {
          name: '指定时间段不可用',
          value: '2'
        },
        {
          name: '指定时间段指定影片补差',
          value: '3'
        }
        // {
        //   name: '仅指定排期可用',
        //   value: '4'
        // },
        // {
        //   name: '指定排期不可用',
        //   value: '5'
        // }
      ],
      isShowFilmSelect: false,
      isShowSetAll: false,
      isShowSetPriceTable: false,
      setPriceKeys: [
        { label: '', value: 'ruleData', placeholder: '请填写补差金额' }
      ]
    }
  },
  computed: {
    form: {
      get () {
        return this.item
      },
      set (val) {

      }
    },
    // 是否展示时间组件
    isShowHolidayTime () {
      return ['2', '3'].includes(this.form.type)
    },
    // 是否展示排期
    isShowPaiQi () {
      return ['4', '5'].includes(this.form.type)
    },
    DisabledLimitValue () {
      return this.isDisabledLimitRule ? '3' : ''
    }
  },
  watch: {
    form: {
      handler (val) {
        this.$emit('change', this.form)
      },
      deep: true
      // immediate: true
    }
  },
  created () {
  },
  methods: {
    async handleFinalAfter (val) {
      this.$set(this.form, 'relationType', val.relationType)
      this.$set(this.form, 'relationId', val.relationId)
      this.isShowSetPriceTable = false
      this.$set(this.form, 'copyTypeList', [])
      this.$set(this.form, 'hallTypeList', [])
      // 处理执行制式、执行影厅的请求数据
      let params = {}
      const relationType = val.relationType || '-1'
      const relationId = val.relationId || '-1'
      if (relationType === '-1') {
        params = {
          type: '2',
          id: '-1'
        }
        // 选择全部影院，relationId 为 -1
        this.form.relationId = '-1'
      } else {
        if (relationId !== '-1' && relationId) {
          params = {
            type: relationType,
            id: relationId
          }
        } else {
          this.$set(this.form, 'copyTypeList', [])
          this.$set(this.form, 'hallTypeList', [])
          return
        }
      }
      await this.getCopyTypeList(params)
      await this.getHallTypeList(params)
      this.isShowSetPriceTable = true
    },
    // 获取制式数据
    async getCopyTypeList (params) {
      const _res = await cloudApis.getCopyTypeList(params)
      const _list = _res.map((i) => {
        return {
          id: i.id,
          value: i.name
        }
      })
      this.$set(this.form, 'copyTypeList', _list)
    },
    // 获取影厅数据
    async getHallTypeList (params, index) {
      const _res = await cloudApis.getHallTypeList(params)
      const _list = _res.map((i) => {
        return {
          id: i.id,
          value: i.name
        }
      })
      this.$set(this.form, 'hallTypeList', _list)
    },
    // 处理指定影片ID
    handleClearFilmCode (val) {
      let filmType = val
      let filmCode = ''
      if (val === '2') {
        filmCode = ''
        this.isShowFilmSelect = true
      } else {
        filmCode = '-1'
        this.isShowFilmSelect = false
      }
      this.$set(this.form, 'filmType', filmType)
      this.$set(this.form, 'filmCode', filmCode)
    },
    // 补差金额批量设置回调
    setAllCallBack (val) {
      const hallTypeSelected = this.form.hallType.split(',') // 执行影厅已选的
      const copyTypeSelected = this.form.copyType.split(',') // 执行制式已选的
      const res = this.form.ruleData.map((item, _index) => {
        if (copyTypeSelected.includes(item.copyType)) {
          item.price.forEach((i) => {
            if (hallTypeSelected.includes(i.hallType)) {
              i.money = val
            }
          })
        }
        return item
      })
      this.$set(this.form, 'ruleData', res)
    },
    handleSetAll () {
      this.isShowSetAll = true
    },
    validate () {
      return new Promise((resolve, reject) => {
        let promisrAll = [this.$refs.form.validate()]
        if (this.isShowHolidayTime) {
          promisrAll.push(this.$refs.holidayTime.validate())
        }
        Promise.all(promisrAll).then(() => {
          resolve()
        }).catch(() => {
          reject('*为必填项，请完善')
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
